<script lang="tsx" setup>
import { onMounted, reactive, watch } from 'vue'
import { useSearch } from '@/hooks/component'
import { getAssetAPI } from '@/api/vulnerability/stat/index'
import { useTablePage1 } from '@/hooks/web/useTablePage1'
const props = defineProps({
  cve: {
    type: String,
    required: true,
    default: ''
  }
})
const { table, page, ruleForm, getRecords } = useTablePage1(getAssetAPI, {
  ruleForm: {
    cve: props.cve,
    searchValue: ''
  },
  isMounted: false
})
const { handleSearch } = useSearch('advancedRef', ruleForm, getRecords)

const ruleTable = reactive({
  columns: [
    { label: 'IP', prop: 'ip' },
    { label: '产品名称', prop: 'name' },
    { label: '产品厂商', prop: 'manu' },
    { label: '设备类型', prop: 'type' },
    { label: '漏洞数', prop: 'leakNum' },
    { label: '验证时间', prop: 'date' }
  ]
})
// 监听cveCode变化
watch(
  () => props.cve,
  (newcve) => {
    ruleForm.cve = newcve
    getRecords()
  }
)
onMounted(()=>{
  getRecords()
})
</script>
<template>
  <div class="jm-bg-color">
    <!-- 列表 -->
    <div class="flex justify-end jm-mb">
      <div></div>
      <jmp-search
        v-model="ruleForm.searchValue"
        placeholder="请输入IP或设备类型"
        @change="handleSearch('searchValue')"
      />
    </div>

    <!-- 列表 -->
    <jmp-table :data="table.records" :columns="ruleTable.columns" :loading="table.loading" />
    <!-- 分页 -->
    <jmp-pagination v-model:page="page.pageNum" v-model:limit="page.pageSize" v-model:total="page.total" :pager-count='3'/>
  </div>
</template>
<style lang="scss" scoped></style>
